import {
  ActionType,
  PageContainer,
  ProColumns,
  ProDescriptions,
  ProDescriptionsItemProps,
  ProTable
} from '@ant-design/pro-components';
import '@umijs/max';
import {Button, Drawer} from 'antd';
import React, {useRef, useState} from 'react';
import type {SortOrder} from 'antd/es/table/interface';
import {listMyBorrowRecordVoByPageUsingPost} from "@/services/backend/borrowRecordController";


const TableList: React.FC = () => {
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<API.BorrowRecordVO>();
  const actionRef = useRef<ActionType>();
  const [activeKey, setActiveKey] = useState<string>();


  const columns: ProColumns<API.BorrowRecordVO>[] = [
    {
      title: '序号',
      dataIndex: 'id',
      valueType: 'index',
      width: 50,
    },
    // {
    //   title: '分类',
    //   dataIndex: 'categoryId',
    //   valueType: 'text',
    //   valueEnum: valueEnum,
    //   // hideInTable: true,
    // },
    {
      title: '书名',
      dataIndex: 'title',
      valueType: 'text',
    },
    {
      title: '出版社',
      dataIndex: 'publisher',
      valueType: 'text',
      hideInTable: true,
      search: false,
    },
    {
      title: '出版日期',
      dataIndex: 'publishDate',
      valueType: 'date',
      hideInTable: true,
      search: false,
    },
    {
      title: '价格',
      dataIndex: 'price',
      valueType: 'money',
      hideInTable: true,
      search: false,
    },
    {
      title: '作者',
      dataIndex: 'author',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '分类名',
      dataIndex: 'categoryName',
      valueType: 'text',
      search: false,
    },
    {
      title: '借阅状态',
      dataIndex: 'brStatus',
      valueType: 'text',
      valueEnum: {
        'borrowed': {text: '未归还', status: 'Processing'},
        'returned': {text: '已归还', status: 'Success'},
        'overdue': {text: '逾期未还', status: 'Error'}
      },
      formItemProps: {
        rules: [
          {
            required: true,
          },
        ],
      },
      search: false,
    },
    {
      title: '账号',
      dataIndex: 'userAccount',
      valueType: 'text',
      hideInTable: true,
      search: false,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      valueType: 'text',
      hideInTable: true,
      search: false,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      valueType: 'text',
      hideInTable: true,
      search: false,
    },
    {
      title: '用户简介',
      dataIndex: 'userProfile',
      valueType: 'text',
      hideInTable: true,
      search: false,
    },
    {
      title: '借阅时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      hideInForm: true,
      sorter: true,
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInDescriptions: true,
      render: (_, record) => [
        <Button
          type={'text'}
          size={'small'}
          key="show"
          onClick={() => {
            setShowDetail(true)
            setCurrentRow(record);
          }}
        >
          详情
        </Button>,
      ],
    },
  ];
  return (
    <PageContainer>
      <ProTable<API.RuleListItem, API.PageParams>
        pagination={{
          pageSize: 10,
        }}
        headerTitle={'查询表格'}
        actionRef={actionRef}
        rowKey={currentRow?.id?.toString() || undefined}
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
        ]}
        toolbar={{
          menu: {
            activeKey: activeKey,
            items: [
              {
                key: '',
                label: <span>全部</span>,
              },
              {
                key: 'borrowed',
                label: <span>未归还</span>,
              },
              {
                key: 'returned',
                label: <span>已归还</span>,
              },
              {
                key: 'overdue',
                label: <span>逾期未还</span>,
              },
            ],
            onChange: (key: any) => {
              setActiveKey(key);
              if (actionRef.current) {
                actionRef.current?.reload();
              }
            }
          }
        }}
        // @ts-ignore
        request={async (
          params: {
            pageSize?: number | undefined;
            current?: number | undefined;
            keyword?: string | undefined;
          },
          sort: Record<string, SortOrder>,
          filter: Record<string, React.ReactText[] | null>,
        ) => {
          let sortFieldStr = "";
          let sortOrderStr: any;
          if (Object.keys(sort).length > 0) {
            const [firstSort] = Object.entries(sort); // 获取sort对象的第一个键值对
            sortFieldStr = firstSort[0];
            sortOrderStr = firstSort[1];
          }
          const res = await listMyBorrowRecordVoByPageUsingPost({
            ...params,
            sortField: sortFieldStr,
            sortOrder: sortOrderStr,
            brStatus: activeKey,
          });
          if (res?.data) {
            return {
              data: res?.data.list || [],
              success: true,
              total: res?.data.total,
            };
          } else {
            return {
              data: [],
              success: false,
              total: 0,
            };
          }
        }}
        // @ts-ignore
        columns={columns}
      />
      <Drawer
        width={300}
        visible={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={false}
        title={"详情"}
      >
        <ProDescriptions
          column={1}
          // title={"借阅人" + currentRow?.userName}
          request={async () => ({
            data: currentRow || {},
          })}
          // dataSource={{currentRow} || {}}
          params={{
            id: currentRow?.id,
          }}
          columns={columns as ProDescriptionsItemProps<API.RuleListItem>[]}
        />
        <Button onClick={() => {setShowDetail(false)}} type={"primary"}>关闭</Button>
      </Drawer>
    </PageContainer>
  );
};
export default TableList;
